<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时音效播放</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100vh;
          margin: 0;
      }
      .timer-container {
          text-align: center;
      }
      #timer {
          font-size: 5rem;
          margin: 20px 0;
      }
      button {
          padding: 10px 20px;
          font-size: 1.2rem;
          margin: 5px;
          cursor: pointer;
      }
      .controls {
          margin-top: 20px;
      }
  </style>
</head>
<body>
<div class="timer-container">
  <h1>倒计时器</h1>
  <div id="timer">00:00</div>
  <div class="controls">
    <input type="number" id="minutes" min="1" max="60" value="5" style="width: 50px;">
    <label for="minutes">分钟</label>
    <button id="startBtn">开始</button>
    <button id="pauseBtn" disabled>暂停</button>
    <button id="resetBtn">重置</button>
  </div>
  <div>
    <label>
      <input type="checkbox" id="soundEnabled" checked> 启用音效
    </label>
  </div>
</div>

<script>
  // 音频元素
  const tickSound = new Audio('https://assets.mixkit.co/active_storage/sfx/2157/2157-preview.mp3');
  const endSound = new Audio('https://assets.mixkit.co/active_storage/sfx/2147/2147-preview.mp3');

  // DOM元素
  const timerDisplay = document.getElementById('timer');
  const startBtn = document.getElementById('startBtn');
  const pauseBtn = document.getElementById('pauseBtn');
  const resetBtn = document.getElementById('resetBtn');
  const minutesInput = document.getElementById('minutes');
  const soundCheckbox = document.getElementById('soundEnabled');

  let timer;
  let timeLeft = 0;
  let isRunning = false;

  // 初始化
  function init() {
    resetTimer();

    // 事件监听
    startBtn.addEventListener('click', startTimer);
    pauseBtn.addEventListener('click', pauseTimer);
    resetBtn.addEventListener('click', resetTimer);
  }

  // 开始计时
  function startTimer() {
    if (isRunning) return;

    if (timeLeft === 0) {
      const minutes = parseInt(minutesInput.value) || 5;
      timeLeft = minutes * 60;
      updateDisplay();
    }

    isRunning = true;
    startBtn.disabled = true;
    pauseBtn.disabled = false;

    timer = setInterval(() => {
      timeLeft--;
      updateDisplay();

      // 播放滴答声（每秒）
      if (soundCheckbox.checked && timeLeft > 0) {
        tickSound.currentTime = 0;
        tickSound.play().catch(e => console.log('无法播放音效:', e));
      }

      // 倒计时结束
      if (timeLeft <= 0) {
        clearInterval(timer);
        isRunning = false;
        startBtn.disabled = false;
        pauseBtn.disabled = true;

        // 播放结束音效
        if (soundCheckbox.checked) {
          endSound.play().catch(e => console.log('无法播放结束音效:', e));
        }
      }
    }, 1000);
  }

  // 暂停计时
  function pauseTimer() {
    clearInterval(timer);
    isRunning = false;
    startBtn.disabled = false;
    pauseBtn.disabled = true;
  }

  // 重置计时
  function resetTimer() {
    clearInterval(timer);
    isRunning = false;
    const minutes = parseInt(minutesInput.value) || 5;
    timeLeft = minutes * 60;
    updateDisplay();
    startBtn.disabled = false;
    pauseBtn.disabled = true;
  }

  // 更新显示
  function updateDisplay() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }

  // 初始化应用
  init();
</script>
</body>
</html>